// pages/song/song.js
import req from '../../../utils/req.js'
import PubSub from 'pubsub-js'
import moment from 'moment'
// 实例对象
const appInstance = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    songList: [],
    // 控制那个白色的按钮
    isPlay: false,
    // 存储当前页面对应的歌曲
    musicUrl: null,
    // 存储当前页面歌单的id
    songId: null,
    // 用于存储歌曲当前播放时间
    currentTime: "00:00",
    // 用于存储歌曲总时长
    durationTime: 0,

  },
  // 绑定与背景音频相关的事件监听
  addEvent() {
    // 监视背景音频播放事件
    this.backgroundAudioManager.onPlay(() => {
      // console.log('onPlay')
      if (appInstance.globalData.audioId === this.data.songId * 1) {
        // 当前页面展示歌曲和当前背景音频正在播放的id相同,才执行以下代码
        this.setData({
          isPlay: true
        })
      }

      //  缓存正在播放的歌曲的状态
      appInstance.globalData.playState = true;
    })
    // 用于监视背景音频进度更新事件
    this.backgroundAudioManager.onTimeUpdate(() => {
      // 在此处获取到当前歌曲时间,并更新到data中即可
      // console.log('onTimeUpdate',this.backgroundAudioManager.currentTime)
      // 进度条长度 = 当前时间/总时间
      const currentTime = this.backgroundAudioManager.currentTime
      this.setData({
        currentTime: moment(currentTime * 1000).format('mm:ss'),
        currentWidth: currentTime / this.backgroundAudioManager.duration * 100
      })
    })

    //  用于监视当前背景音频播放结束
    this.backgroundAudioManager.onEnded(() => {
      PubSub.publish('switchType', "next")
    })
    // 监视背景音频暂停事件
    this.backgroundAudioManager.onPause(() => {
      // console.log('onPause')
      if (appInstance.globalData.audioId === this.data.songId * 1) {
        // 当前页面展示歌曲和当前背景音频正在播放的id相同,才执行以下代码
        this.setData({
          isPlay: false
        })
      }

      // 1.缓存当前正在播放的歌曲的状态
      appInstance.globalData.playState = false;
    })
  },
  // 用于请求歌曲的音频链接
  async getMusicUrl() {
    const result1 = await req('/song/url', {
      id: this.data.songId
    });
    this.setData({
      musicUrl: result1.data[0].url
    })
  },

  // 用于请求歌曲的详细信息
  async getMusicDetail() {
    const result = await req('/song/detail', {
      ids: this.data.songId
    });
    this.setData({
      songList: result.songs[0],
      durationTime: moment(result.songs[0].dt).format('mm:ss')
    })
    // 动态设置当前页面导航栏标题
    wx.setNavigationBarTitle({
      title: this.data.songList.name
    })
  },
  // 用于监视用户点击上一首/下一首按钮,自动切换对应歌曲
  switchType(event) {
    const {
      id
    } = event.currentTarget
    // console.log('switchType')
    // 订阅消息switchType异步
    // PubSub.subscribe('sendId', async(msg, id) => {
    //   // console.log('sendId', msg, id)
    //   this.setData({
    //     songId: id
    //   })

    //   await this.getMusicDetail();
    //   await this.getMusicUrl();
    //   // 获取歌曲资源
    //   this.backgroundAudioManager.src = this.data.musicUrl;
    //   this.backgroundAudioManager.title = this.data.songList.name;

    //   this.setData({
    //     isPlay: true
    //   })

    // })
    // 发布
    PubSub.publish('switchType', id)
  },
  // 监听用户是否点击了播放按钮
  handleplay() {
    // 获取全局唯一的背景音频管理器
    // const backgroundAudioManager = wx.getBackgroundAudioManager();
    // 判断c3效果显示还是隐藏
    if (this.data.isPlay) {
      // 暂停
      this.backgroundAudioManager.pause();
      // 1.缓存当前正在播放的歌曲的状态
      appInstance.globalData.playState = false;
    } else {
      // 获取歌曲资源
      // backgroundAudioManager.src = this.data.musicUrl;
      // backgroundAudioManager.title = this.data.songList.name;
      this.backgroundAudioManager.src = this.data.musicUrl;
      this.backgroundAudioManager.title = this.data.songList.name;

      // 1.缓存当前正在播放的歌曲的状态
      appInstance.globalData.playState = true;
      // 2.缓存当前正在播放的歌曲的id
      appInstance.globalData.audioId = this.data.songList.id;
    }
    this.setData({
      isPlay: !this.data.isPlay
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function(options) {
    /*
      小程序接收路由传参的数据,需要通过onLoad的形参options获取,options是一个query对象
     */

    // console.log('options', options)
    const {
      songId
    } = options;
    // console.log('songId', songId)
    // console.log('song', JSON.parse(song))

    // const result = await req('/song/detail', { ids: songId });
    this.setData({
      // songList: result.songs[0]
      songId
    })

    // 动态设置当前页面导航栏标题
    // wx.setNavigationBarTitle({
    //   title: this.data.songList.name
    // })
    // const result = await req('/song/detail',{ids:songId});
    // this.setData({
    //   songList:result.songs[0]
    // })

    // const result1 = await req('/song/url', { id: songId });
    // this.setData({
    //   musicUrl: result1.data[0].url
    // })
    // // 动态设置当前页面导航栏标题
    // wx.setNavigationBarTitle({
    //   title: this.data.songList.name
    // })
    // 音乐详情
    this.getMusicDetail();

    // const result1 = await req('/song/url', { id: songId });
    // this.setData({
    //   musicUrl: result1.data[0].url
    // })
    // 图片详情
    this.getMusicUrl();

    // 以下代码用于测试小程序全局对象传参
    // console.log('appInstance1', appInstance.a.msg)
    // appInstance.globalData.msg = "我是全局修改之后的数据"
    // console.log('appInstance2', appInstance.globalData.msg)
    // 对象的方法列表获取实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    // 用于获取当前背景音频的歌曲信息和播放状态
    const {
      audioId,
      playState
    } = appInstance.globalData;
    // console.log(songId,audioId, playState)
    // 判断存储当前页面歌单的id和播放歌曲的id是否一致
    if (audioId === songId * 1 && playState) {
      this.setData({
        // 显示c3
        isPlay: true
      })
    }
    // console.log('PubSub', PubSub)
    this.addEvent();
    // 订阅消息switchType
    this.token = PubSub.subscribe('sendId', async(msg, id) => {
      // console.log('sendId', msg, id)
      this.setData({
        songId: id
      })

      appInstance.globalData.audioId = id;
      await this.getMusicDetail();
      await this.getMusicUrl();
      // 获取歌曲资源
      this.backgroundAudioManager.src = this.data.musicUrl;
      this.backgroundAudioManager.title = this.data.songList.name;
      this.setData({
        isPlay: true
      })
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
    PubSub.unsubscribe(this.token);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})